<template>
  <el-card class="list-page role-container">
    <div class="list-h">
      <el-button
        type="primary"
        @click="handleOperate('add', {})"
        v-auth="`/projectsS/monomer--add`"
        class="add-option"
        >创建新单体工程</el-button
      >

      <el-form
        :inline="true"
        :model="formInline"
        ref="formRef"
        class="demo-form-inline"
      >
        <el-form-item>
          <el-button
            type="primary"
            @click="handleSearch"
            v-auth="`/projectsS/monomer--query`"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-skeleton
      style="height: calc(100vh - 300px)"
      :rows="8"
      :loading="loading"
      animated
    >
    </el-skeleton>
    <el-table
      :data="tableData"
      stripe
      v-loading="loading"
      v-show="!loading"
      :height="'calc(100vh - 300px)'"
      :header-cell-style="{
        background: '#F7F9FD',
        color: '#000',
        height: '48px',
        borderTop: '1px soild #E4E8F2'
      }"
    >
      <template #empty>
        <el-empty :image-size="150" description="暂无数据"></el-empty>
      </template>
      <el-table-column type="index" label="序号" width="50">
        <template v-slot="scope">
          <span>{{
            (formInline.pageNum - 1) * formInline.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="engineerNum" label="单体工程编号">
      </el-table-column>
      <el-table-column label="单体工程名称">
        <template #default="{ row }">
          <el-tooltip class="box-item" placement="bottom-end">
            <template #content>
              <div style="max-width: 260px; line-height: 18px">
                {{ row.engineerName }}
              </div>
            </template>
            <span type="text" class="shot-text">{{ row.engineerName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="engineerTypeName"
        label="工程类型"
      ></el-table-column>
      <el-table-column prop="leaderName" label="负责人"></el-table-column>
      <el-table-column prop="createUserName" label="创建人"></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="160"
      ></el-table-column>
      <el-table-column label="操作" width="170" fixed="right">
        <template #default="{ row }">
          <el-button
            type="text"
            @click="handleOperate('edit', row)"
            v-auth="`/projectsS/monomer--edit`"
            >编辑</el-button
          >
          <el-button
            type="text"
            class="btns-danger"
            v-auth="`/projectsS/monomer--delete`"
            @click="showDeleteMessageBox(row)"
            >删除</el-button
          >
          <el-button
            type="text"
            v-auth="`/projectsS/monomer--delete`"
            @click="showImg(row)"
            >上传照片</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <re-pagination
      :total="total"
      v-show="total > 0"
      v-model:page="formInline.pageNum"
      v-model:limit="formInline.pageSize"
      @pagination="handleSearch"
    />

    <el-drawer
      size="50%"
      v-model="drawer"
      :before-close="handleClose"
      destroy-on-close
      custom-class="demo-drawer"
    >
      <template #title>
        <div class="demo-drawer__header">
          {{ mode === "add" ? "创建单体" : "编辑单体" }}
        </div>
      </template>
      <div class="demo-drawer__content">
        <AddMonomer
          v-if="drawer"
          :mode="mode"
          :roleInfo="roleInfo"
          @emitClose="emitClose"
        />
      </div>
    </el-drawer>

    <el-dialog
      modal-class="my-dialog"
      v-model="showDialog"
      title="上传形象进度照片"
      destroy-on-close
      width="956px"
      @close="handleCancel"
    >
      <div class="scroll-content">
        <div class="d-box d-box-wrap">
          <div class="d-wrap">
            <div class="d-img-flex">
              <div>
                <ecm-image-upload
                  :custumWH="true"
                  :files="defaultFileList"
                  @set-file="
                    fileList => {
                      handleChange(fileList);
                    }
                  "
                ></ecm-image-upload>
              </div>
            </div>
          </div>
        </div>
        <div class="d-box d-box-wrap">
          <div
            class="d-wrap"
            v-for="(item, index) in dialogImgList"
            :key="index"
          >
            <p>{{ dayjs(item.uploadDate).format("YYYY年MM月DD日") }}</p>
            <div class="d-img-flex">
              <div class="img-box-2" v-for="(i, t) in item.imgList" :key="t">
                <previewImg :files="i"></previewImg>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn-bottom">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="sureUpload">确定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script lang="ts">
import { reactive, toRefs, ref, defineComponent } from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
import RePagination from "/@/components/RePagination/index.vue";
import AddMonomer from "./components/AddMonomer.vue";
import NotifMessage from "/@/utils/message/notification";
import {
  getMonomer,
  deleMonomer,
  monomerUpload,
  monomerPicList
} from "/@/api/projects";
import { ModeType } from "./types";
import { storageLocal } from "/@/utils/storage";
import { clickEvent } from "/@/utils/func";
import ecmImageUpload from "/@/components/ecmImage/index.vue";
import previewImg from "/@/components/previewImg/index.vue";
import dayjs from "dayjs";
export default defineComponent({
  name: "monomer",
  components: {
    RePagination,
    AddMonomer,
    ecmImageUpload,
    previewImg
  },
  setup() {
    let router = useRouter();
    const formRef = ref<HTMLFormElement | null>(null) as any;
    let projectInfo = storageLocal.getItem("projectInfo");
    let sectionInfo = storageLocal.getItem("sectionInfo");
    let loading = ref<boolean>(false);
    let total = ref<number>(0);
    let drawer = ref<boolean>(false);
    let mode = ref<ModeType>("add");
    let formInline = reactive({
      pageNum: 1,
      pageSize: 10,
      sectionId: sectionInfo.id,
      projectManageId: projectInfo.id
    });

    let state = reactive({
      tableData: [],
      roleInfo: {}
    });

    let showDialog = ref(false);
    let showMore = ref(false);
    let activeImg = ref({});
    let defaultFileList = ref([]);
    let activeItem = {} as any;
    let imgList = ref([
      {
        src: "blob:http://localhost:3001/e23773a1-a44a-459d-9104-25ddcc6cf98f",
        time: "2023.12.30",
        monorName: "单体12324324342"
      },
      {
        src: "blob:http://localhost:3001/86173a04-f8ec-465c-b614-180722479ee2",
        time: "2023.12.30",
        monorName: "单体12324324342"
      },
      {
        src: "blob:http://localhost:3001/63580beb-923c-4841-b8f1-2531ee5a4461",
        time: "2023.12.30",
        monorName: "单体12324324342"
      },
      {
        src: "blob:http://localhost:3001/ffe8752e-47dd-467c-ab52-a3eda28b3d56",
        time: "2023.12.30",
        monorName: "单体12324324342"
      },
      {
        src: "blob:http://localhost:3001/63580beb-923c-4841-b8f1-2531ee5a4461",
        time: "2023.12.30",
        monorName: "单体12324324342"
      },
      {
        src: "blob:http://localhost:3001/ffe8752e-47dd-467c-ab52-a3eda28b3d56",
        time: "2023.12.30",
        monorName: "单体12324324342"
      }
    ]);
    let dialogImgList = ref([]);

    // 根据条件进行搜索
    const handleSearch = (): void => {
      getTableData(formInline);
    };

    // 打开添加人员弹窗
    const handleAdd = () => {
      drawer.value = true;
      mode.value = "add";
    };

    // 编辑角色
    const handleEdit = row => {
      drawer.value = true;
      mode.value = "edit";
      state.roleInfo = row;
    };

    const handleClose = () => {
      drawer.value = false;
    };

    const emitClose = () => {
      getTableData(formInline);
      drawer.value = false;
    };

    //获取单体列表
    const getTableData = async (obj: object = {}) => {
      loading.value = true;
      try {
        const { code, data } = await getMonomer(obj);
        if (code === 200) {
          state.tableData = data.list;
          total.value = data.rows;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    };

    const handleOperate = (type, row = {}) => {
      if (type === "add") {
        router.push({
          path: "/projectsS/proManage/monomer/detail"
        });
      } else if (type === "edit") {
        router.push({
          path: "/projectsS/proManage/monomer/detail",
          query: {
            id: row.id
          }
        });
      }
    };

    // 删除单体
    const handleDelete = async (item: any) => {
      try {
        const { code, message } = await deleMonomer({ id: item.id });
        if (code === 200) {
          clickEvent("项目单体", "删除", "删除项目单体");
          NotifMessage.success(message);
          getTableData(formInline);
        } else {
          NotifMessage.error(message);
        }
      } catch (err) {
        console.log(err);
      }
    };
    const showDeleteMessageBox = row => {
      ElMessageBox.confirm("确定删除该条记录吗？", "", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
        iconClass: "el-icon-warning"
      })
        .then(() => {
          handleDelete(row);
        })
        .catch(() => {});
    };
    const showImg = async item => {
      activeItem = item;
      try {
        const { code, data } = await monomerPicList({
          monomerId: activeItem?.id
        });
        if (code === 200) {
          let list = data.list;
          let otherList = [];
          list.forEach(item => {
            item.imgList = item.dayAttachment
              ? JSON.parse(item.dayAttachment)
              : [];
            otherList.push(item);
          });
          dialogImgList.value = otherList;
        }
      } catch (err) {
        console.log(err);
      }
      showDialog.value = true;
    };
    const handleChange = fileList => {
      defaultFileList.value = fileList;
    };

    const handleCancel = () => {
      showDialog.value = false;
      defaultFileList.value = [];
    };

    const sureUpload = async () => {
      if (!defaultFileList.value || !defaultFileList.value.length) {
        return;
      }
      try {
        const { code, message } = await monomerUpload({
          projectManageId: activeItem?.projectManageId,
          sectionId: activeItem?.sectionId,
          monomerId: activeItem?.id,
          dayAttachment: JSON.stringify(defaultFileList.value)
        });
        if (code === 200) {
          showDialog.value = false;
          NotifMessage.success(message);
        }
      } catch (err) {
        console.log(err);
      }
    };

    // 请求数据
    getTableData(formInline);
    return {
      ...toRefs(state),
      total,
      formRef,
      loading,
      formInline,
      handleSearch,
      handleDelete,
      showDeleteMessageBox,
      handleOperate,
      handleAdd,
      handleEdit,
      handleClose,
      emitClose,
      drawer,
      mode,
      showDialog,
      showMore,
      activeImg,
      imgList,
      dialogImgList,
      defaultFileList,
      showImg,
      handleChange,
      handleCancel,
      sureUpload,
      dayjs
    };
  }
});
</script>
<style>
.mt8 {
  margin-top: 8px;
}
.el-icon-warning {
  color: #e45d5d !important;
}
</style>
<style lang="scss" scoped>
.role-container {
  .demo-drawer {
    .demo-drawer__header {
      line-height: 58px;
      padding-left: 15px;
      font-size: 14px;
      font-weight: 600;
      color: #606266;
    }
    .demo-drawer__content {
      height: calc(100vh - 64px);
      width: 100%;
      border-top: 1px solid rgba(0, 21, 41, 0.15);
    }
  }
  :deep .el-drawer__header {
    margin-bottom: 0px;
    padding-top: 0;
  }
  :deep .el-drawer__body {
    padding: 0;
  }
}
:deep .el-table__row.odd-row {
  background: #fdfdff;
}
.shot-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  cursor: pointer;
}
.my-dialog {
  // :deep(.el-dialog .el-dialog__body) {
  //   padding-bottom: 18px;
  // }
  .d-box {
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 8px;
    &.h24 {
      height: 24px;
    }
    &.d-flex {
      display: flex;
      justify-content: space-between;
    }
    .d-left {
      display: flex;
      align-items: center;
      font-size: 14px;
      .d-line {
        width: 2px;
        height: 12px;
        background: #e4e8f2;
        border-radius: 1px;
        margin-left: 9px;
        margin-right: 9px;
      }
    }
    .d-right {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #5298ff;
      cursor: pointer;
      i {
        font-size: 20px;
        margin-left: 2px;
      }
    }
  }
  .img-wrap {
    height: 662px;
    background: #ffffff;
    box-shadow: 0px 5px 10px 0px rgba(194, 202, 222, 0.5);
    border-radius: 2px;
    padding: 16px;
    text-align: center;
    overflow: hidden;
    .img-box-1 {
      width: 100%;
      max-height: 100%;
      border-radius: 4px;
      text-align: center;
      overflow: hidden;
    }
    img {
      width: 100%;
      max-width: 100%;
      // max-height: 100%;
    }
  }
  .d-box-wrap {
    // height: 662px;
    background: #ffffff;
    margin-bottom: 20px;
    .d-wrap {
      box-shadow: 0px 5px 10px 0px rgba(194, 202, 222, 0.5);
      border-radius: 2px;
      padding: 8px 4px 12px 12px;
      line-height: 0;
      margin-bottom: 8px;
      p {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #495164;
      }
      .d-img-flex {
        display: flex;
        flex-wrap: wrap;
        min-height: 140px;
        // .back-picture {
        //   .el-upload-list__item {
        //     width: 172px !important;
        //     height: 140px !important;

        //     .el-upload-list__item-actions {
        //       font-size: 18px;
        //     }
        //   }
        //   .el-upload--picture-card {
        //     width: 172px !important;
        //     height: 140px !important;
        //     background: #fdfdff;
        //     border-radius: 4px;
        //     border: 1px solid #e4e8f2;

        //     i {
        //       height: 100%;
        //       width: 100%;
        //       line-height: 100%;
        //       font-size: 18px;
        //       color: #8c939d;
        //       display: flex;
        //       flex-direction: column;
        //       justify-content: center;
        //       align-items: center;

        //       span {
        //         font-size: 12px;
        //         font-family: PingFangSC-Regular, PingFang SC;
        //         font-weight: 400;
        //         color: #8895b7;
        //       }
        //     }
        //   }
        // }
      }
      .img-box-2 {
        width: 172px;
        height: 140px;
        border-radius: 4px;
        margin-top: 8px;
        text-align: center;
        overflow: hidden;
        margin-right: 8px;
      }
      img {
        width: 100%;
        max-width: 100%;
        // max-height: 100%;
      }
    }
  }
  .ml10 {
    margin-left: 10px;
  }
  .back {
    font-size: 14px;
    color: #5298ff;
    margin-right: 10px;
  }
  .scroll-content {
    height: 662px;
    overflow: auto;
    // padding-bottom: 20px;
  }
  .btn-bottom {
    text-align: right;
    padding-top: 8px;
    padding-left: 16px;
    padding-right: 16px;
  }
}
</style>
